<!--
 * @Description: 3D轮播
 * @Date: 2022-05-16 17:53:32
 * @LastEditTime: 2022-05-16 18:07:36
 * @FilePath: /测试文档(总结)/35.轮播.html
 * @Author: byhzdemacbook-pro-2.local
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清除默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }
        /* 轮播图大盒子 */
        .turnround {
            position: relative;
            width: 700px;
            height: 400px;
            margin: 100px auto;
            perspective: 10000px;/*设置透视（视距）*/

        }
        /* 设置左右跳转箭头 */
        .turnround .left,
        .turnround .right {
            position: absolute;
            display: block;
            top: 50%;
            width: 20px;
            height: 20px;
            font-size: 14px;
            font-weight: 700;
            text-align: center;
            line-height: 20px;
            color: #fff;
            background-color: #ccc;
            transform: translateY(-50%) translateZ(350px);
            z-index: 1;
        }

        .turnround .left {
            left: 0;
            border-radius: 0 100% 100% 0;
        }

        .turnround .right {
            right: 0;
            border-radius: 100% 0 0 100%;
        }

        /* 3D盒子 */
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;/*让子盒子保持3D状态*/
            transition: all .5s;/*添加过渡*/
        }
        /* 轮播图 */
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 400px;
            /* background-color: pink; */
        }
        /* 子代选择器nth-child()  从1开始 */
        .box div:nth-child(1) {
            transform: translateZ(350px);
            background-color: pink;
        }

        .box div:nth-child(2) {
            transform: translateX(50%) rotateY(90deg);
            background-color: #ccc;
        }

        .box div:nth-child(3) {
            transform: translateZ(-350px) rotateY(180deg);
            background-color: green;
        }

        .box div:nth-child(4) {
            transform: translateX(-50%) rotateY(-90deg);
            background-color: skyblue;
        }

        /* 轮播图导航小圆点 */
        .turnround ul {
            position: absolute;
            left: 50%;
            bottom: 50px;
            height: 14px;
            line-height: 14px;
            padding: 2px 5px;
            background-color: purple;
            border-radius: 7px;
            transform: translateX(-50%) translateZ(350px);
        }

        .turnround ul li {
            float: left;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;
        }
        /* 设置小圆点选中样式 */
        .turnround ul .current {
            background-color: orange;
        }
    </style>
    <script>
        window.addEventListener('load', function () {
            // 1.获取元素
            var turd = document.querySelector('.turnround');
            var pre = document.querySelector('.left');
            var next = document.querySelector('.right');

            var box = document.querySelector('.box');
            var imgs = document.querySelectorAll('.box div');
            var ul = document.querySelector('.turnround ul');

            // 2.当鼠标经过时停止定时器
            turd.addEventListener('mouseenter', function () {

                // 当鼠标经过时停止定时器
                clearInterval(timer);
                timer = null; //清除定时器变量
            })
            // 3.当鼠标离开时开启定时器
            turd.addEventListener('mouseleave', function () {

                // 当鼠标离开时开启定时器
                timer = setInterval(function () {
                    // 手动调用鼠标点击事件
                    next.click();
                }, 2000)
            })

            // 记录轮播图旋转度数
            var count = 0;
            // 节流阀
            var flag = true;
            // 记录当前小圆点位置
            var num = 0;
            // 记录点击小圆点的位置
            var pnum = 0;
            // console.log(pre);

            // 4.根据轮播图数量动态生成小圆点
            for (let i = 0; i < imgs.length; i++) {
                // 创建一个li
                var li = document.createElement('li');
                // 记录当前索引号
                li.setAttribute('index', i);
                // 将li加入到DOM树中
                ul.appendChild(li);

                //  5.当点击小圆点是，改变它的颜色
                li.addEventListener('click', function () {
                    // 将其他小圆点背景设置为空
                    for (let i = 0; i < ul.children.length; i++) {
                        ul.children[i].className = '';
                    }
                    this.className = 'current';

                    // 点击小圆点时滚动轮播图
                    let index = this.getAttribute('index');
                    pnum = num;
                    num = index;
                    // 改变旋转度数
                    count -= (num - pnum) * 90;
                    box.style = 'transform:rotateY(' + count + 'deg);';

                });
            }
            // 默认第一个选中
            ul.children[0].className = 'current';

            // 6.点击左箭头
            pre.addEventListener('click', function () {
                // 当节流阀打开时
                if (flag) {
                    flag = false;
                    count += 90;
                    num--;
                    if (num < 0) {
                        num = imgs.length - 1;
                    }
                    // 将其他小圆点背景设置为空
                    for (let i = 0; i < ul.children.length; i++) {
                        ul.children[i].className = '';
                    }
                    ul.children[num].className = 'current';
                    box.style = 'transform:rotateY(' + count + 'deg);';

                }
            })
            // 7.点击右箭头
            next.addEventListener('click', function () {
                // 当节流阀打开时
                if (flag) {
                    flag = false;
                    count -= 90;
                    num++;
                    if (num == imgs.length) {
                        num = 0;
                    }
                    // 将其他小圆点背景设置为空
                    for (let i = 0; i < ul.children.length; i++) {
                        ul.children[i].className = '';
                    }
                    ul.children[num].className = 'current';
                    console.log(num);
                    box.style = 'transform:rotateY(' + count + 'deg);';
                }

            })
            // 8.监听轮播图过渡完成时，打开节流阀
            box.addEventListener('transitionend', () => {
                flag = true;
            })
            // 9.自动播放轮播图
            var timer = setInterval(function () {
                // 手动调用鼠标点击事件
                next.click();
            }, 2000)
        })
    </script>
</head>

<body>
    <div class="turnround">
        <a href="javascript:;" class="left">
            <</a> <a href="javascript:;" class="right">>
        </a></a>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
        <ul>
        </ul>
    </div>
</body>

</html>